<template>
    <canvas id="myCanvas" width="1700" height="820" ref="cvs"></canvas>
    <input type="range" :min="0" :max="100" id="range" v-model="per" style="position: fixed;left: 300px;top: 300px;width: 300px">
</template>

<script lang="ts" setup>
import Circle from "@/features/basic-shape/Circle";
import Line from "@/features/basic-shape/Line";
import Text from "@/features/basic-shape/Text";
import Feature from "@/features/Feature";
import Rect from "@/features/basic-shape/Rect";
import AnimationPlugin from "@/AnimationPlugin";
import { Utils } from "@/utils";
import { message } from "ant-design-vue";
import { onMounted, ref } from "vue";
import { FontFamily, LinkStyle } from "../Constants";
import GridSystem from "../GridSystem";
import Link from "@/features/basic-shape/link/Link";
import Group from "@/features/function-shape/Group";

const cvs = ref(null);
const per = ref(0);
let gls = ref<GridSystem | null>(null);

onMounted(() => {
    reset();
})

function reset(clear = false) {
    if (clear) localStorage.setItem("features", '');
    if (gls.value) {
        gls.value.destroy();
        gls.value = null;
    }
    let canvasDom = cvs.value as unknown as HTMLCanvasElement;
    const gridSys = new GridSystem(canvasDom);
    gridSys.initEventListener();
    gridSys.loadFont(FontFamily.SHISHANG);
    gridSys.draw(true)
    gls.value = gridSys;
    setSize(canvasDom);

    const rect = new Rect(-0, -100, 50, 20);
    // rect.rotate(35, rect.pointArr[0]);
    gls.value.addFeature(rect) 

    // rect.setSize(150, rect.size.height, rect.pointArr[0])

    // const circle = new Circle(50, 0, 50);
    // gls.value.addFeature(circle)

    // const rect1 = new Rect(0, 20, 10, 10);
    // circle.addChild(rect1, true)

    // const link = new Link(rect, circle);
    // const generatePnts = link.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
    // gls.value.addFeature(link)
    // // const linkPnts = Utils.getInterpolatePnts(link.pointArr);
    // link.pointArr = generatePnts

    // const group = new Group(circle, rect, link)
    // group.cbResize = true;
    // gls.value.addFeature(group)

    const animate = new AnimationPlugin({
        duration: 5000, // 动画持续2秒
        to: { x: rect.position.x + 100 },
        onUpdate(process) {
            rect.setPos(process.x);
        },
        ease: 'cubicBezier(0,-0.57,0,2.86)' // 使用quadInOut缓动函数  
    });

    // animate.go();

    // setTimeout(() => {
    //     message.info("暂停!")
    //     animate.pause();
    // }, 3000)

    // setTimeout(() => {
    //     message.info("回放!")
    //     animate.reverse();
    // }, 4000)

    const range = document.getElementById('range') as HTMLInputElement;
    range.oninput = (e: any) => {
        animate.update(e.target.value / 100);
    }
}

function setSize(canvasDom: HTMLCanvasElement) {
    canvasDom.width = document.documentElement.clientWidth - 4;
    canvasDom.height = document.documentElement.clientHeight - 4;

    window.onresize = () => {
        canvasDom.width = document.documentElement.clientWidth - 4;
        canvasDom.height = document.documentElement.clientHeight - 4;
    }
}

</script>